<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>猜姓游戏</title>
</head>
<body>
    <div class="center-container">
        <h1 class="title">一秒猜出你的姓🙄💅</h1>
        
    </div>
    <div class="show">
        <div class="table">
            <table>
                <caption>姓氏表</caption>
                <tbody>
                <!-- 动态生成表格内容 -->
                </tbody>
            </table>
        </div>
    </div>
    <div class="buttons">
        <button class="yes">是</button>
        <button class="start">开始</button>
        <button class="no">否</button>
    </div>
</body>
</html>
<style>
    .center-container {
        text-align: center;
    }

    table {
        height: 500px;
        border-collapse: collapse;
        width: 100%;
        max-width: 800px;
        margin: 20px auto;
        box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
    }
    
    th, td {
        border: 1px solid #ddd;
        padding: 12px;
        text-align: center;
    }
    
    th {
        background-color: #f2f2f2;
        font-weight: bold;
    }

    /* 表格标题 */
    caption {
        font-size: 1.2em;
        margin-bottom: 10px;
        font-weight: bold;
    }

    /* 交替行色 */
    tr:nth-child(even) {
        background-color: #f4f3f3;
    }

    .buttons {
        display: flex;
        justify-content: center;    /* 水平居中 */
        align-items: center;        /* 垂直居中 */
        gap: 30px;                  /* 按钮间距 */
        margin: 20px 0;             /* 容器上下边距 */
    }

    .buttons button {
        padding: 10px 20px;         /* 按钮内边距 */
        border-radius: 6px;         /* 圆角 */
        border: none;
        background-color: #4CAF50;  /* 默认背景色 */
        color: white;
        cursor: pointer;
        font-size: 16px;
    }

    /* 不同按钮样式 */
    .buttons .yes { background-color: #4CAF50; display: none; }
    .buttons .start { background-color: #2196F3; }
    .buttons .no { background-color: #f44336; display: none; }

    .buttons button:hover {
        filter: brightness(1.1);    /* 悬停时变亮 */
    }
</style>
<script>
const surnames = [
  "赵", "钱", "孙", "李", "周", "吴", "郑", "王", "冯", "陈",
  "褚", "卫", "蒋", "沈", "韩", "杨", "朱", "秦", "尤", "许",
  "何", "吕", "施", "张", "孔", "曹", "严", "华", "金", "魏",
  "陶", "姜", "戚", "谢", "邹", "喻", "柏", "水", "窦", "章",
  "云", "苏", "潘", "葛", "奚", "范", "彭", "郎", "鲁", "韦",
  "昌", "马", "苗", "凤", "花", "方", "俞", "任", "袁", "柳",
  "酆", "鲍", "史", "唐", "费", "廉", "岑", "薛", "雷", "贺",
  "倪", "汤", "滕", "殷", "罗", "毕", "郝", "邬", "安", "常",
  "乐", "于", "时", "傅", "皮", "卞", "齐", "康", "伍", "余",
  "元", "卜", "顾", "孟", "平", "黄", "和", "穆", "萧", "尹"
];
const shuffled = [...surnames];
const tbody = document.querySelector('tbody');
const btn_start = document.querySelector('.start');
const btn_yes = document.querySelector('.yes');
const btn_no = document.querySelector('.no');

// 初次渲染姓氏表
for (let i = 0; i < 10; i++) {
        const tr = document.createElement('tr');
        
        for (let j = 0; j < 10; j++) {
            const td = document.createElement('td');
            td.textContent = `${surnames[i * 10 + j]}`;
            tr.appendChild(td);
        }
        
        tbody.appendChild(tr);
}

// 再次渲染姓氏表
let x = 0;
let y = 0;
let flag = false;
const changTable = () => {
    console.log(`x = ${x}, y = ${y}`);
    if(x < 10 && y < 10) {
        tbody.innerHTML = '';
        for (let i = 0; i < 5; i++) {
            const tr = document.createElement('tr');
            for (let j = 0; j < 2; j++) {
                const td = document.createElement('td');
                td.textContent = `${shuffled[flag ? i * 20 + j * 10 + y : i * 2 + j + x * 10]}`;
                td.style.fontSize = '50px';
                tr.appendChild(td);
            }
            tbody.appendChild(tr);
        }
    }
    else {
        tbody.innerHTML = '';
        document.querySelector('.table table caption').innerHTML = "不存在";
        btn_yes.style.display = 'none';
        btn_no.style.display = 'none';
        btn_start.style.display = 'flex';
    }
}

const showResult = () => {
    for (let i = 0; i < 10; i++) {
        const tr = document.createElement('tr');
        
        for (let j = 0; j < 10; j++) {
            const td = document.createElement('td');
            td.textContent = `${surnames[i * 10 + j]}`;
            if(surnames[i * 10 + j] === shuffled[x * 10 + y]) td.style.backgroundColor = 'red';
            tr.appendChild(td);
        }
        
        tbody.appendChild(tr);
    }
}

// 为按钮绑定点击事件
btn_start.addEventListener('click', () => {
    x = 0;
    y = 0;
    flag = false;

    // 随机化姓氏表
    for (let i = shuffled.length - 1; i > 0; i--) {
        // 生成一个 0 到 i 之间的随机整数 j
        const j = Math.floor(Math.random() * (i + 1));
        // 交换位置 i 和 j 的元素
        [shuffled[i], shuffled[j]] = [shuffled[j], shuffled[i]];
    }

    document.querySelector('.table table caption').innerHTML = "姓氏表"
    btn_start.style.display = 'none';
    btn_yes.style.display = 'flex';
    btn_no.style.display = 'flex';
    btn_start.innerHTML = "重新开始";
    changTable();
})
btn_yes.addEventListener('click', () => {
    if(flag) {
        tbody.innerHTML = '';
        document.querySelector('.table table caption').innerHTML = "姓氏表（结果）";
        btn_yes.style.display = 'none';
        btn_no.style.display = 'none';
        btn_start.style.display = 'flex';
        showResult()
    }
    else {
        flag = true;
        changTable();
    }
})
btn_no.addEventListener('click', () => {
    if (!flag) {
        x++;
        changTable();
    }
    else {
        y++;
        changTable();
    }
})
</script>